<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>520</title>
  <style>
    header {
      width: 290px;
      margin: 0 auto;
      font-size: 26px;
      font-weight: bold;
    }

    .heart {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 105px;
      height: 105px;
      margin: -52.5px 0 0 -52.5px;
    }

    .heart::before {
      content: '';
      display: block;
      transition: all 400ms;
      width: 15px;
      height: 15px;
      margin: -15px 0 0 -15px;
      box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
      animation: pulse 1.2s steps(1) infinite;
    }
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 375px;
      margin: 0 auto;
      font-size: 26px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <header>You Are My Sunshine!</header>
  <div class="heart"></div>
  <footer>Happy every day! 节日快乐~</footer>
</body>

</html>
